<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-transform"/> 
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>EasySlide demo</title>
    <link href="reset.css" rel="stylesheet">
    <link href="../src/EasySlide.css" rel="stylesheet">
    <script src="../src/EasySlide.js"></script>
    <script src="../src/loader.js"></script>
    <script src="../src/ppt.js"></script>
    <script src="../src/effects.js"></script>
    <style>
      .docTitle{
        margin-top:10%;
        margin-bottom:10%;
        text-align:center; 
      }
      .docNav{
        list-style:initial;
        border-top:#000 solid 1px;
        border-bottom:#000 solid 1px;
        padding:10px 10px 10px 20px;
        line-height:300%;
        margin:10% auto;
        width:200px;
      }
      .docGroups p{
        text-align:center; 
        margin-bottom:10px;
      }
      .docText{
        margin:0 auto;
        width:80%;
        line-height:200%;
        height:100px;
        overflow-y:auto;
        background:#fff;
      }
      .docText p{
        text-indent:20px;
        text-align:left;
        margin-bottom:10px;
      }
      #j_wrap{
        margin:10% auto;
        background:#fff; 
        border:#000 solid 1px;
      }

      .EasySlide-warp {
        overflow:initial;
      }
    
    </style>
  </head>
  <body>
    <div style="width:450px;overflow:hidden;margin:20px;positive:relative;">
    <div class="EasySlide-warp" id="j_wrap">
      <div index="0" class="EasySlide-slides" style="background:red;">
        <div class="EasySlide-groups docGroups" gindex="0">
          <div id="j_ppt"></div>
        </div>
      </div>
      <div index="1" class="EasySlide-slides" style="background:blue;">
        <div class="EasySlide-groups docGroups" gindex="0">
          <h1 delay=".5s" duration="1s" in="zoomIn" class="EasySlide-animate docTitle">EasySlide</h1>
          <ol delay="1s" duration=".5s"  in="fadeInDown" class="EasySlide-animate docNav">
            <li goto="2">什么是EasySlide?</li>
            <li goto="3">快速上手.</li>
            <li goto="4">下载使用.</li>
          </ol>
          <p delay="1.5s" in="fadeInUp" class="EasySlide-animate">项目主页</p>
          <p delay="2s" in="zoomIn" class="EasySlide-animate"><a href="http://github.com/xiaojue/EasySlide" target="_blank">http://github.com/xiaojue/EasySlide</a></p>
        </div>
      </div> 
      <div index="2" class="EasySlide-slides" style="background:green;">
        <div class="EasySlide-groups docGroups" gindex="0">
          <h1 delay=".5s" duration="1s" in="zoomIn" class="EasySlide-animate docTitle">什么是EasySlide?</h1>
          <div delay="1.3s" duration=".5s" in="fadeIn" class="EasySlide-animate docText" scroll="y">
            <p>不基于任何框架、快速、独立的制作H5 Mobile页面的框架。它包含资源loader，页面切换功能，子类PPT功能，内部页面跳转功能，page overlay功能，自定义动画效果和扩展动画效果等功能</p>
            <p>使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可。</p>
            <p>使用EasySlide，可以不再使用javascript来设置动画顺序与效果，而只需要编写对应的动画类和设置HTML节点信息即可。</p>
          </div>
        </div>
      </div> 
      <div index="3" class="EasySlide-slides" style="background:pink;">
        <div class="EasySlide-groups docGroups" gindex="0">
          <h1 delay=".5s" duration="1s" in="zoomIn" class="EasySlide-animate docTitle">快速上手.</h1>
          <div delay="1.3s" in="fadeIn" class="EasySlide-animate docText">
            <p>
              引用好所需得JS和CSS文件，之后调用对应方法即可，如果不需要扩展，则只需要编写HTML部分即可，更多参见项目详细README.
            </p>
          </div>
        </div>
      </div> 
      <div index="4" class="EasySlide-slides" style="background:green;">
        <div class="EasySlide-groups docGroups" gindex="0">
          <h1 delay=".5s" duration="1s" in="zoomIn" class="EasySlide-animate docTitle">下载使用.</h1>
          <p delay="1.5s" in="fadeInUp" class="EasySlide-animate">项目主页</p>
          <p delay="2s" in="zoomIn" class="EasySlide-animate"><a href="http://github.com/xiaojue/EasySlide" target="_blank">http://github.com/xiaojue/EasySlide</a></p>
        </div>
      </div>
    </div>
    </div>
    <a id="prev" href="javascript:;">prev</a>
    <a id="next" href="javascript:;">next</a>
  </body>
  <script>
    var slide = new EasySlide({
      swipeDirection:'x',
      firstTime:false,
      margin:10,
      replay:true,
      width:300,
      height:300,
      subpptObjects:[{
        wrapDiv:"j_ppt",
        imgs:["images/desktop/1.jpg", "images/desktop/2.jpg", "images/desktop/3.jpg", "images/desktop/4.jpg", "images/desktop/5.jpg","images/desktop/1.jpg", "images/desktop/2.jpg", "images/desktop/3.jpg", "images/desktop/4.jpg", "images/desktop/5.jpg"],
        parentNum:0
      }],
      wrapAll:'j_wrap'
    });

    var utils = EasySlide.utils;
    var next = utils.$('next');
    var prev = utils.$('prev');
    utils.bind(next,'click',function(){
      slide.move(1); 
    });
    utils.bind(prev,'click',function(){
      slide.move(-1); 
    });
    //编写跟随手指移动的插件,只编写了default的例子
    /*
    slide.on('swipeMove',function(slides,moves,target){
      var self = slide;
      var cur = slides[self.curIndex];
      var prev = slides[self.curIndex - 1] || slides[slides.length - 1];
      var next = slides[self.curIndex + 1] || slides[0];
      var curLeft = 0;
      var nextLeft = cur.clientWidth + self.margin;
      var prevLeft = - cur.clientWidth - self.margin;
      var moved = self.swipeDirection == 'x' ? moves.moveX * moves.positive.x : moves.moveY * moves.positive.y;
      var subindex = self.subpptNum.indexOf(self.curIndex);
      if (subindex !== -1 && utils.contain(target, EasySlide.Subppt.STATIC.imgWrapCls)) { //如果此页有子ppt
        return;
      }
      cur.style.transition = 'all 0s';
      next.style.transition = 'all 0s';
      prev.style.transition = 'all 0s';
      EasySlide.animationEffects['default'](cur,self.swipeDirection,moved+curLeft);
      EasySlide.animationEffects['default'](prev,self.swipeDirection,moved+prevLeft);
      EasySlide.animationEffects['default'](next,self.swipeDirection,moved+nextLeft);
    });
    //先小幅度滑动再大幅度反向，会造成停留，在end的时候重置
    slide.on('swipeEnd', slide.showCurSlide.bind(slide));
    */
    //动态插入第5个,你也可以重新绘制innerHTML，再调用renderSlide,不支持subppt的后初始化
    var slide5 = '<div index="5" class="EasySlide-slides" style="background:blue;">\
        <div class="EasySlide-groups docGroups" gindex="0">\
          <h1 delay=".5s" duration="1s" in="zoomIn" class="EasySlide-animate docTitle">EasySlide555</h1>\
        </div>\
      </div>';
    var temp = document.createElement('div');
    temp.innerHTML = slide5;
    slide.wrapAll.appendChild(temp.firstChild);
    slide.renderSlide();
    
  </script>
</html>
